<template>
  <div id="app">
    <header style="margin-bottom: 20px">
      <div id="hd_top">
        <div style="width: 990px; margin: 0 auto">
          <a href="/" style="margin-left: 20px">严选车官网</a>
          &nbsp
          <el-button type="text" @click="open">收藏本站</el-button>
        </div>
      </div>
      <div style="height:40px;line-height: 40px;background-color: #e14800">
        <div style="width: 990px;margin: 0 auto">
          <div id="d1">
            <ul>
              <a href="/forumIndex" title="严选车社区" style="float:left; margin:-8px 15px 0 0;">
                <img src="images/forumImg/logo.png" alt="严选车社区" border="0">
              </a>
              <li>
                <a href="/forumIndex">首页</a>
              </li>
              <li style="background-color: white">
                <a href="javascript:void(0)" style="color: red">社区</a>
              </li>
              <li>
                <a href="javascript:void(0)">积分商城</a>
              </li>
              <li>
                <a href="javascript:void(0)">车友会群</a>
              </li>
              <li>
                <a href="javascript:void(0)">每日精选</a>
              </li>
              <li>
                <a href="introduction">关于我们</a>
              </li>
            </ul>
          </div>
          <div id="d2">
            <ul>
              <li v-if="isLogin == false">
                <a class="a1" style="font-size: 13px" href="login">登录</a>
              </li>
              <li v-else>
                <scan class="a1" style="font-size: 13px; color:white">{{ this.username }}</scan>
              </li>
              <li v-if="isLogin == false">
                <a class="a1" style="font-size: 13px" href="register">注册</a>
              </li>
              <li v-else>
                <input class="a1" type="button" style="font-size: 13px; width: 40px; color: white; background-color: #e14800; border: none" value="登出" @click="logout">
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div style="border-bottom: 0 solid #C2D5E3">
        <div style="width:990px;margin: 0 auto">
          <div id="scbar">
            <input type="text" placeholder="请输入搜索内容" v-model="keywords">
            <el-button icon="el-icon-search" size="small" @click="this.searchByKeywords"></el-button>
            &nbsp
            <b style="font-size: 15px"> 热搜: </b>
            <a v-for="h in hotSearchArr" :href="h.url"
               style="font-size: 13px;color: #369;margin-left: 10px">{{ h.name }}</a>
          </div>
        </div>
      </div>
    </header>
    <main>
      <div id="pt">
        <div class="z">
          <a href="forumIndex" class="nvhm" title="首页">人人车社区-专业二手车论坛</a>
          <em></em>
          <a href="javascript:void(0)">社区</a>
        </div>
      </div>
      <div class="bm" style="margin-bottom: 10px">
        <div class="bm_h cl">
                <span class="y" style="margin-right: 10px">
                    <a href="javascript:void(0)" class="fa_fav" @click="open">
                        收藏本版
                        <span class="xi1">(268)</span>
                    </a>
                </span>
          <h1 class="xs2">
            <a href="community" style="margin:0 10px 0 10px;color: #333;">人人车友</a>
            <span class="xs1 xw0 i">今日: <span class="xi1">1</span>
              <b class="ico_increase">&nbsp;&nbsp;&nbsp;&nbsp;</b>
              <span class="pipe" style="margin: 0 5px 0 5px">|</span>
              浏览量: <span class="xi1">13252</span>
              <span class="pipe" style="margin: 0 5px 0 5px">|</span>
              排名: <span class="xi1" title="上次排名:1" >1</span>
              <b class="ico_increase" style="margin: 0 50px 0 0">&nbsp;&nbsp;&nbsp;&nbsp;</b>
              <a href="http://localhost:8080/articleDetails?id=8" style="color: #FF0000;">人人车口碑日，坚持用户第一，感恩一路同行！</a>
              <a href="javascript:void(0)" @click="open">
                <img src="https://bbs.renrenche.com/source/plugin/vanfon_geyan/images/heart2.png" style="height:10px;margin-right: 5px;">
              </a>
              <span>10761</span>
            </span>
          </h1>
        </div>
      </div>
      <div id="bg" style="border: 1px solid #999;border-bottom: none">
        <div style="overflow: hidden">
          <div class="bt" style="width: 59%;padding-left: 1%;text-align: center">标题</div>
          <div class="bt" style="width: 10%;">作者</div>
          <div class="bt" style="width: 10%;">浏览量</div>
          <div class="bt" style="width: 20%;">发表时间</div>
          <hr>
        </div>
        <div v-for="art in articleArr" style="overflow: hidden">
          <div class="bt" style="width: 59%;padding-left: 1%">
            <a :href="'articleDetails?id='+art.id">
              <img src="https://bbs.renrenche.com/static/image/common/folder_new.gif" alt="" style="height: 12px">
            </a>
            <a :href="'articleDetails?id='+art.id" class="content_blue" style="margin: 0 5px 0 5px;color: #1989fa">[快报]</a>
            <a :href="'articleDetails?id='+art.id">{{ art.title }}</a>
            <img src="https://bbs.renrenche.com/static/image/filetype/image_s.gif" style="height: 14px;margin-left: 5px">
          </div>
          <div class="bt" style="width: 10%;">{{ art.author }}</div>
          <div class="bt" style="width: 10%;">{{ art.pageView }}</div>
          <div class="bt" style="width: 20%;">{{ art.gmtCreate }}</div>
          <hr>
        </div>
      </div>
    </main>
    <footer>
      <div style="background: #DCDADB">
        <div id="ft_top">
          <div>
            <h3>关于我们</h3>
            <p>
              <el-link href="/" icon="el-icon-link">网站首页</el-link>
              <el-link href="/introduction" icon="el-icon-link">关于我们</el-link>
            </p>
            <p>
              <el-link href="partner" icon="el-icon-link">加入我们</el-link>
              <el-link href="javascript:void(0)" icon="el-icon-link">联系我们</el-link>
            </p>
          </div>
          <div>
            <h3>联系我们</h3>
            <p>
              <el-link href="/" icon="el-icon-link">网站:http://localhost:8080</el-link>
            </p>
            <p>
              <el-link href="javascript:void(0)" icon="el-icon-link">微博:http://weibo.com/renrenyouche</el-link>
            </p>
            <p>
              <el-link href="javascript:void(0)" icon="el-icon-link">客服电话:400-690-9670</el-link>
            </p>
          </div>
          <div>
            <h3>关注我们</h3>
          </div>
        </div>
      </div>
      <div style="background-color: #363636">
        <div id="ft_bottom">
          <p>
            <a href="javascript:void(0)">手机版</a>
            <el-divider direction="vertical"></el-divider>
            <a href="javascript:void(0)">个人收藏</a>
            <el-divider direction="vertical"></el-divider>
            <a href="javascript:void(0)">小黑屋</a>
            <el-divider direction="vertical"></el-divider>
            <a href="detail">严选车-放心二手车-爱车人懂车人聚集地</a>
          </p>
          <p>京ICP备 14030440号</p>
          <p>地址：北京市朝阳区北苑东路中国铁建广场B座19-21层 电话: 400-670-1080</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keywords: '',
      hotSearchArr: [{name: '严选车社区', url: 'forumIndex'}, {name: '严选车', url: '/'},
        {name: '二手车', url: 'detail'}, {name: '车友会', url: 'javascript:void(0)'}], //热搜
      articleArr:[],
      username: '',
      isLogin: false
    }
  },
  methods: {
    open() {
      this.$alert('请按 Ctrl+D 键添加到收藏夹', '提示信息', {
        confirmButtonText: '确定'
      })
    },
    loadArticleList() {
      let url = 'http://localhost:5081/article/list';
      this.axios.get(url).then((response) => {
        console.log(response.data);
        let jsonResult = response.data;
        this.articleArr = jsonResult.data;
      })
    },
    searchByKeywords() {
      location.href = 'articleResult?keywords=' + this.keywords;
    },
    logout(){
      localStorage.clear();
      location.reload();
    }
  },
  mounted() {
    this.loadArticleList();
    if (localStorage.getItem('formData') != null) {
      let str = localStorage.getItem('formData');
      this.username = str.substring(9,str.indexOf('&'));
      this.isLogin = true;
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

body {background: #f2f2f2;}

main{
  width: 990px;
  margin: 0 auto;
}

a {
  color: #666;
  text-decoration: none;
}
#app{text-align: left}

.el-button {
  color: #666;
  font-size: 13px;
}

#d1 {
  width: 800px;
  float: left;
  overflow: hidden;
  height: 40px;
  margin: 0 15px auto;
}

#d1 ul li a:hover, #d2 a:hover {
  background-color: white;
  color: #D32031;
}

#d1 ul li a {
  color: white;
  display: block;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
}

#d2 {
  float: right;
}

input {
  height: 25px;
  width: 400px;
  margin-left: 18px;
}

ul {
  display: block;
}

ul li {
  margin: 0;
  list-style: none;
}

#d1 ul {
  overflow: hidden;
  float: left;
}

#d1 li {
  float: left;
}

#d2 li {
  float: left;
}

#d2 a {
  height: 30px;
  line-height: 30px;
  padding: 5px 15px !important;
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: normal;
}

#scbar {
  width: 990px;
  overflow: hidden;
  height: 42px;
  line-height: 42px;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #E9EFF5;
  background: #E8EFF5
}

.box-card img {
  width: 100%;
}

footer {
  margin-top: 15px;
}

#ft_top {
  height: 170px;
  width: 900px;
  margin: 0 auto
}

#ft_top div {
  padding-top: 30px;
  text-align: center;
  width: 300px;
  float: left;
}

#ft_top p {
  margin-bottom: 5px;
}

#ft_top h3 {
  margin-bottom: 10px;
}

#ft_bottom {
  background-color: #363636;
  height: 120px;
  width: 990px;
  margin: 0 auto;
  padding-top: 30px;
  text-align: center;
  font-size: 12px;
}

#ft_bottom p {
  margin-bottom: 5px;
}

#ft_bottom a, #ft_bottom p {
  color: #FFFFFF;
}

#pt {
  margin: 2px 0;
  height: 29px;
  border: none;
  background: transparent;
  line-height: 29px;
}

#pt .z a, #pt .z em, #pt .z span {
  float: left;
  height: 29px;
  font-size: 13px;
}

.nvhm {
  width: 16px;
  background: url(https://bbs.renrenche.com/static/image/common/search.png) no-repeat 0 0;
  line-height: 200px;
  overflow: hidden;
}

.z a{color: #333}

.bm {
  border: 1px solid #CDCDCD;
  background: #FFF;
}

.bm div{
  height: 40px;
  line-height: 40px;
}

.fa_fav {
  background: no-repeat 0 50%;
  background-image: url(https://bbs.renrenche.com/static/image/common/fav.gif);
  padding-left: 20px;
  font-size: 13px;

}

.xi1{color: #F26C4F}

.y {float: right}

.xs2 {font-size: 14px !important}

.ico_increase{
  background: url(https://bbs.renrenche.com/static/image/common/increase.png) no-repeat left center;
}

.bt{
  float: left;
  background-color: white;
  height: 30px;
  line-height: 30px;
}

#bg a{
  color: #333;
}

em{
  width: 20px;
  background: url(https://bbs.renrenche.com/static/image/common/pt_item.png) no-repeat 3px 10px;
  line-height: 200px;
  overflow: hidden;
}

#bg{
  background-color: #efefef;
  margin-bottom: 10px;
}
#hd_top {
  text-align: left;
  height: 30px;
  line-height: 30px;
  background: #fff;
}

#hd_top .el-button--text {
  font-size: 13px;
  color: #666;
}

#hd_top a {
  font-size: 13px;
}
</style>